<template>
  <div class="mywork-container content-container">
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="poster-title"
    >
      <h2>我的作品和模版</h2>
    </a-row>
    <a-tabs @change="changeCategory">
      <a-tab-pane key="0" tab="我的作品"> </a-tab-pane>
      <a-tab-pane key="1" tab="我的模版"> </a-tab-pane>
    </a-tabs>
    <a-empty v-if="works.length === 0 && !isLoading">
      <template v-slot:description>
        <span> 还没有任何作品 </span>
      </template>
      <a-button type="primary" size="large"> 创建你的第一个设计 🎉 </a-button>
    </a-empty>

    <works-list
      :list="works"
      @on-delete="onDelete"
      @on-copy="onCopy"
      :loading="isLoading"
    >
    </works-list>
    <a-row type="flex" justify="space-between" align="middle">
      <ul class="ant-pagination">
        <li
          class="ant-pagination-prev"
          :class="{ 'ant-pagination-disabled': isFirstPage }"
        >
          <a class="ant-pagination-item-link" @click.prevent="loadPrevPage">
            上一页
          </a>
        </li>
        <li
          v-for="item in totalPage"
          :key="item"
          class="ant-pagination-item"
          :class="{ 'ant-pagination-item-active': pageIndex + 1 === item }"
        >
          <a @click.prevent="goToPage(item - 1)">{{ item }}</a>
        </li>
        <li
          class="ant-pagination-next"
          :class="{ 'ant-pagination-disabled': isLastPage }"
        >
          <a class="ant-pagination-item-link" @click.prevent="loadMorePage">
            下一页
          </a>
        </li>
      </ul>
      <!-- <h2>{{ pageIndex }}</h2>
      <a-button
        type="primary"
        size="large"
        @click="loadPrevPage"
        v-if="!isFirstPage"
        :loading="isLoading"
        >上一页</a-button
      >
      <a-button
        type="primary"
        size="large"
        @click="loadMorePage"
        v-if="!isLastPage"
        :loading="isLoading"
        >下一页</a-button
      > -->
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, ref, nextTick } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { GlobalDataProps } from '../store/index';
import WorksList from '../components/WorksList.vue';
import useLoadMore from '../hooks/useLoadMore';
export default defineComponent({
  components: {
    WorksList,
  },
  setup() {
    const store = useStore<GlobalDataProps>();
    const router = useRouter();
    const works = computed(() => store.state.templates.works);
    const total = computed(() => store.state.templates.totalWorks);
    const isLoading = computed(() => store.getters.isOpLoading('fetchWorks'));
    const isTemplate = ref(0);
    const searchParams = computed(() => ({
      pageIndex: 0,
      pageSize: 4,
      isTemplate: isTemplate.value,
    }));
    onMounted(() => {
      store.dispatch('fetchWorks', { searchParams: searchParams.value });
    });
    const {
      isLastPage,
      loadMorePage,
      isFirstPage,
      loadPrevPage,
      pageIndex,
      requestParams,
      goToPage,
      totalPage,
    } = useLoadMore('fetchWorks', total, searchParams.value);
    const onDelete = (id: number) => {
      store.dispatch('deleteWork', id);
    };
    const onCopy = (id: number) => {
      store.dispatch('copyWork', id).then(({ data }) => {
        router.push(`/editor/${data.id}`);
      });
    };
    const changeCategory = (key: any) => {
      isTemplate.value = key;
      pageIndex.value = 0;
      requestParams.isTemplate = key;
      nextTick(() => {
        store.dispatch('fetchWorks', { searchParams: searchParams.value });
      });
    };

    return {
      works,
      onDelete,
      onCopy,
      isLoading,
      total,
      changeCategory,
      loadMorePage,
      isLastPage,
      isFirstPage,
      loadPrevPage,
      pageIndex,
      goToPage,
      totalPage,
    };
  },
});
</script>

<style>
.mywork-container .ant-input-search {
  width: 30%;
}
.searchResult {
  display: flex;
  align-items: center;
}
#main-chart {
  position: relative;
}
.chart-loading {
  position: absolute;
  left: 50%;
  top: 50%;
}
</style>
